<template>
  <div class="app-container">
    <el-card class="table_style">
      <el-form ref="ruleForm" :model="express" :rules="rules" label-width="100px">
        <el-form-item label="物流名称" prop="name">
          <el-input v-model="express.name" />
        </el-form-item>

        <el-form-item label="物流编号" prop="code">
          <el-input v-model="express.code" />
        </el-form-item>

        <el-form-item label="官方地址" prop="url">
          <el-input v-model="express.url" />
        </el-form-item>

        <el-form-item label="物流排序" prop="sort">
          <el-input v-model.number="express.sort" maxlength="2" min="1" />
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置表单</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ editor ? '立即更新' : '立即创建' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createExpress, fetchExpress, updateExpress } from '@/api/express'

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['editor'],
  data() {
    return {
      express: {
        name: '',
        code: '',
        url: '',
        sort: '99'
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入物流名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 8,
            message: '长度在 3 到 8 个字符',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入物流编号',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '请输入官方地址',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序值',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    if (this.editor) {
      this.init()
    }
  },
  methods: {
    async init() {
      const res = await fetchExpress(this.$route.params.id)
      this.express = res.data.express
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        let res
        if (this.editor) {
          res = await updateExpress(this.express.id, this.express)
        } else {
          res = await createExpress(this.express)
        }
        if (res.code === 20000) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.push({ name: 'Express' })
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleChange(value) {
    }
  }
}
</script>
